<!-- Imports Polymer -->
<link rel="import" href="../../../../bower_components/polymer/polymer.html">

<!-- Imports Dependencies -->
<link rel="import" href="../../../../bower_components/app-localize-behavior/app-localize-behavior.html">
<link rel="import" href="../../../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../../../bower_components/paper-item/paper-icon-item.html">
<link rel="import" href="../../../../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">

<!-- Defines element markup -->
<dom-module id="language-selection">

  <template>

    <custom-style>
      <style>

        :host
        {
          display: block;
          background-color: var(--background-color);
        }

        paper-dropdown-menu
        {
          width: 100%;
          background-color: var(--background-color);

          --paper-input-container-input: 
          {
            color: var(--secondary-color);
          };
        }

        paper-listbox
        {
          height: 200px;
          background-color: var(--background-color);
        }

        paper-icon-item
        {
          color: var(--primary-color);
          background-color: var(--background-color);
        }

        paper-icon-item.focused
        {
          color: var(--primary-color);
          background-color: var(--secondary-color);
        }

      </style>
    </custom-style>

    <paper-dropdown-menu label='[[localize("language")]]'>
      <paper-listbox slot="dropdown-content" attr-for-selected="iso" selected="{{selected}}">

        <dom-repeat items="[[availableLanguageIso]]" as="iso">
          <template>
            <paper-icon-item iso="[[iso]]">
              <img slot="item-icon" width="40" src$='[[_getFlagPathOfLanguageIso(iso)]]'>
              [[_convertLanguageIsoToLanguageName(iso)]]
            </paper-icon-item>
          </template>
        </dom-repeat>

      </paper-listbox>
    </paper-dropdown-menu>
  </template>

  <!-- Loads JavaScript -->
  <script src="language-selection.js"></script>
</dom-module>
